<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta charset="utf-8">
<title>显示所有店铺</title>
<link rel="stylesheet"
	href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script
	src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script
	src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script type="text/javascript">

$(document).ready(function(data){ 
	/* 	var pageUrl=document.getElementById("pageUrl"); */
		var activityQuery={};
		var status=$("#status").val();
		
		activityQuery.title="";
		activityQuery.active_status=status;
		activityQuery.page=1;
		activityQuery.total=0;	
		activityQuery.pageSize=5;
		activityQuery.sortBy=0;
		function dateformat(times){
		
			var d = new Date(times);    //根据时间戳生成的时间对象
			var dates = (d.getFullYear()) + "-" + 
			           (d.getMonth() + 1) + "-" +
			           (d.getDate()) + " " + 
			           (d.getHours()) + ":" + 
			           (d.getMinutes()) + ":" + 
			           (d.getSeconds());
			      return dates;
		}
		function clear(activityQuery){
			var activityQuery={};
			
			activityQuery.title="";
			activityQuery.active_status="";
			activityQuery.page=1;
			activityQuery.total=0;
			activityQuery.pageSize=5;
			activityQuery.sortBy=0;
		}

		
		function createTable(obj){
			var tr=$("<tr></tr>").addClass('clear');
			var td1=$("<td>"+obj.title+"</td>");	
			tr.append(td1);
			var td2=$("<td>"+obj.e_desp+"</td>");
			tr.append(td2);
			var td3=$("<td>"+obj.min_num+"</td>");
			tr.append(td3);
			var td4=$("<td>"+obj.max_num+"</td>");
			tr.append(td4);
			var td5=$("<td>"+obj.cur_num+"</td>");
			tr.append(td5);
		   	var td6=$("<td>"+dateformat(obj.start_time)+"</td>");
			tr.append(td6);
				
			var td7=$("<td>"+dateformat(obj.end_time)+"</td>");
			tr.append(td7);
			var td8=$("<td>"+dateformat(obj.last_time)+"</td>");
			tr.append(td8);
			var td9=$("<td>"+obj.person_name+"</td>");
			tr.append(td9);
			var tda=$("<td>"+obj.person_phone+"</td>");
			tr.append(tda);
			var tdb=$("<td>"+obj.location+"</td>");
			tr.append(tdb);
			var tdc=$("<td>"+obj.active_status+"</td>");
			tr.append(tdc);
			var tdbj=$("<td></td>");
			var a1=$("<a></a>").attr('href',"../Activity_Select.action?id="+obj.id).text("查看详情");
			var a2=$("<a></a>").attr('href',"../Activity_edit2.action?id="+obj.id).text("编辑");
			var a3=$("<a></a>").attr('href',"../Activity_delete.action?id="+obj.id).text("删除");
			var s1=$("<span>"+'|'+"</span>");
			var s2=$("<span>"+'|'+"</span>");
			tdbj.append(a1);
			tdbj.append(s1);
			tdbj.append(a2);
			tdbj.append(s2);
			tdbj.append(a3);
			tr.append(tdbj);
			return tr;
		}
		function ajaxRequest(acitivityQuery){
		
			$.ajax({
				url: '${pageContext.request.contextPath}/QueryActivity.action',
				type:'POST',
				dataType:'json',
				contentType: "application/json", 
				data:JSON.stringify(acitivityQuery),
				async: false, 
				success:function(data)
				{
					var list=data["listAct"];
					 activityQuery=data["aquery"];
				
					  for(i=0;i<list.length;i++){
						 var table=$("#table");
						  var obj=list[i];
						  
						var tr=createTable(obj);
						table.append(tr); 
					  }
					
				}
			});
			return activityQuery;
			
		}

		function showPageUrl2(activityQuery){
			$("#pageUrl2").remove();
			var pageNav=$("#pageNav");
			var ul=$("<ul></ul>").addClass("pagination");
			ul=ul.attr("id","pageUrl2");
			var t=activityQuery.total;
			
			for(var i=0;i<activityQuery.total;i++){
				var li=$("<li></li>");
				var a=$("<a onclick=''>"+(i+1)+"</a>").attr("href","#"); 
				li.append(a); 
				ul.append(li);
				a.click(function() {
				
					var pageSize=$("#pageSize").innerHTML;
					$(".clear").css("display","none");
					var status=$("#status").val();
					
					activityQuery.active_status=status;
					
					activityQuery.page=this.innerHTML;;
				
					activityQuery.pageSize=pageSize;
					
					ajaxRequest(activityQuery);
			    });
			}
			console.log("创建了url")
			pageNav.append(ul);
		}
	 /*
	$("#pageUrl2").on("click", "a",function() { 
	/*   $("#pageUrl2 a").bind("click", function() {  */
	/* 	
	$("#pageUrl2").delegate("ul a","click",function(){ 
	 */		/*	alert(1);
				var pageSize=$("#pageSize").innerHTML;
				$(".clear").css("display","none");
				var status=$("#status").val();
				
				activityQuery.active_status=status;
				
				activityQuery.page=this.innerHTML;;
			
				activityQuery.pageSize=pageSize;
				console.log(activityQuery+"pageurl2...");
				ajaxRequest(activityQuery);
			}
	);*/
	$("#status").change(function(){
		$("#title").val("");

		$("#pageUrl1").css("display","none");
		
		$("#pageUrl2").remove();
		$(".clear").remove();
		var status=$("#status").val();
		if(status==""){
		
		}
		if(status=="all"){
			
			activityQuery.page=1;
			
			activityQuery.active_status="all";
			ajaxRequest(activityQuery);
			showPageUrl2(activityQuery);
		}
		else{
			$("#pageUrl1").css("display","none");
			$("#pageUrl2").css("display","none");
		activityQuery.page=1;
		activityQuery.active_status=status;
		activityQuery=ajaxRequest(activityQuery);
		showPageUrl2(activityQuery);
		}
	});
	$("#titleQuery").click(
		function(){
		/* 	$("#status").get(0).attr("selected","selected");
		 */
			$(".clear").remove();
		$("#status").val("1");
	var title=$("#title").val();
			
			if(title==""){
				alert("标题不能为空");
			}
			else{
				$(".clear").remove();
			activityQuery.active_status="";
			activityQuery.title=title;
			activityQuery.page=1;
			ajaxRequest(activityQuery)
			
			}
		}
	);
	$("#sortBy1").change(function(){
		clear(activityQuery);
		$(".clear").remove();
		var s1=$("#sortBy1").val();
		var s2=$("#sortBy2").val();
		if(s1=='按截至时间'&&s2=='由近到远'){
			activityQuery.sortBy=3;
			
			}
		else if(s1=='按开始时间'&&s2=='由近到远'){
			activityQuery.sortBy=4;
		}
		else if(s1=='按开始时间'&&s2=='由远到近'){
			activityQuery.sortBy=1;
		}
		else if(s1=='按截止时间'&&s2=='由远到近'){
			activityQuery.sortBy=2;
		}
		console.log(activityQuery);
		ajaxRequest(activityQuery);
	});
	$("#sortBy2").change(function(){
		$(".clear").remove();
		clear(activityQuery);
		var s1=$("#sortBy1").val();
		var s2=$("#sortBy2").val();
		if(s1=='按截至时间'&&s2=='由近到远'){
			activityQuery.sortBy=3;
			
			}
		else if(s1=='按开始时间'&&s2=='由近到远'){
			activityQuery.sortBy=4;
		}
		else if(s1=='按开始时间'&&s2=='由远到近'){
			activityQuery.sortBy=1;
		}
		else if(s1=='按截止时间'&&s2=='由远到近'){
			activityQuery.sortBy=2;
		}
		ajaxRequest(activityQuery);
	});


	});
</script>

</head>
<body style="overflow-x: hidden">
	
	<!--content-->
	<div class="contact" style="background-color: white">
		<div class="container">
			<div class="row">
		<span id="sp"></span>
			<div class="btn-group">
				<button type="button" class="btn btn-default dropdown-toggle"
					data-toggle="dropdown">
					搜索条件 <span class="caret"></span>
				</button>
				<ul class="dropdown-menu" role="menu">
					<li><a href="#"></a></li>
					<li><a href="#">另一个功能</a></li>
					<li><a href="#">其他</a></li>
				</ul>
			</div>
			
			<div
				style="font-family: '微软雅黑'; display: inline-block; margin-left: 50px">标题</div>
			<div style="display: inline-block;">
				<input type="text"id="title" class="form-control">
			
			</div>
			<div class="btn-group"style="cursor: pointer;display: inline-block;margin-left: 50px;width: 250px;">
					<div style="font-family: '微软雅黑';display: inline-block;" >活动状态:</div>
						<select class=" form-control" role="menu" id="status" 
						style="cursor: pointer;display: inline-block;width:150px;"value="全部活动" >
						<option selected="selected" value="1"></option>
						
						<option ><a href="#" style="cursor: pointer;">all</a></option>
							<option>
								<a href="#" style="cursor: pointer;">wait</a>
							</option>
							<option>
								<a href="#" style="cursor: pointer;">end</a>
							</option>
							<option>
								<a href="#" style="cursor: pointer;">being</a>
							</option>
						</select>
				</div>
				
			<div class="btn-group" style="margin-left: 50px;">
				<button type="submit" class="btn btn-default" id="titleQuery">查询</button>
			</div>
			
			<a href="addAct.jsp"
				style="margin-left: 50px; text-decoration: none; color: cornflowerblue;">新增活动</a>
		</div>
		<div style="margin-top: 20px;">
			<div class="col-xs-1"></div>
			<span style="font-family: '微软雅黑';">排序方式</span>
			<div class="btn-group" style="margin-left: 10px">
					
				<select class="form-control" role="menu" id="sortBy1">
					<option><a href="#">按截至时间</a></option>
					<option><a href="#">按开始时间</a></option>
				
				</select>
			</div>
			<div style="margin-left:50px;display:inline-block">
			<span style="font-family: '微软雅黑';">时间顺序:</span>
			
			<div class="btn-group" style="margin-left: 20px;border:1px soild red">
					
				<select class="form-control" role="menu" id="sortBy2" style="display:inline-block">
					<option><a href="#">由近到远</a></option>
					<option><a href="#">由远到近</a></option>
				</select>
			</div>
			</div>
		</div>
		<div class="col-md-12" style="margin-top: 20px; margin-left: -30px">

			<table class="table table-bordered" id="table">

				<thead>
					<tr>
						<th>活动标题</th>
						<th>活动说明</th>
						<th>活动最低人数</th>
						<th>活动最高人数</th>
						<th>当前报名人数</th>
						<th>活动开始时间</th>
						<th>活动截止时间</th>
						<th>活动最后修改时间</th>
						<th>活动负责人<th>
						<th>负责人电话</th>
						<th>活动地点<th>
						<th>活动状态</th>
						<th>活动编辑</th>
					</tr>
				</thead>
					<tbody id="tbody">
	
				</tbody>
			</table>
		</div>
		
		<div style="margin-left: 100px;">

		<nav aria-label="Page navigation" id="pageNav">
		
		
	
		<ul class="pagination" id="pageUrl1">
			<li><a href="managershowAct.action?page=1" aria-label="Previous"> <span
					aria-hidden="true">&laquo;</span>
			</a></li>
			
			
		</ul>
	
		
		</nav>
		
		
		
	</div>
		
		</div>
	</div>

</body>

</html>